<div id="top-bar-content">
  <a href="{{ path_fix }}{{ lang }}/" id="logo-onki"> </a>
  <div id="navigation">
      <a href="{{ path_fix }}{{ lang }}/" id="navi1" class="navigation-font">{% trans "Vocabularies" %}</a>
{#  --  link hidden for now since the instructions page doesn't yet exist
      <a href="#" id="navi2" class="navigation-font"> {% trans "Käyttöohjeet" %}</a>
#}
      <a href="{{ path_fix }}{{ lang }}/about" id="navi3" class="navigation-font"> {% trans "About ONKI" %}</a>
      <a href="{{ path_fix }}{% if vocab_id and vocab.title%}{{ vocab_id }}/{% endif %}{{ lang }}/feedback" id="navi4" class="navigation-font"> {% trans "Feedback" %}</a>
  </div>
  <div id="language">
    {% if lang == 'fi' %}
    <span class="language-selection language-selected" > suomeksi</span>
    {% else %}
    <a id="language-fi" class="language-selection" href="http://{{ request_uri|replace({'/sv/': '/fi/', '/en/': '/fi/'}) }}"> suomeksi</a>
    {% endif %}
    {% if lang == 'sv' %}
    <span class="language-selection language-selected" > på svenska</span>
    {% else %}
    <a id="language-sv" class="language-selection" href="http://{{ request_uri|replace({'/fi/': '/sv/', '/en/': '/sv/'}) }}"> på svenska</a>
    {% endif %}
    {% if lang == 'en' %}
    <span class="language-selection language-selected" > in English</span>
    {% else %}
    <a id="language-en" class="language-selection" href="http://{{ request_uri|replace({'/fi/': '/en/', '/sv/': '/en/'}) }}"> in English</a>
    {% endif %}
  </div>
</div>
<!-- top-bar ENDS HERE -->
